<template>
  <div class="bigCenter">
    <div class="bg">
      <Echart
        ref="centerLeft1ChartRef"
        :options="options"
        width="90%"
        height="100%"
      ></Echart>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  export default {
    name: 'BigCenter1',
    components: { Echart },
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        options: {}
      }
    },
    watch: {
      data: {
        handler (newData) {
          // 设置点的位置(经纬度)
          const seriesData = [
            {
              name: '武义县',
              value: [119.809159, 28.816563, 20]
            },
            {
              name: '浦江县',
              value: [119.893363, 29.451254, 20]
            },
            {
              name: '磐安县',
              value: [120.559545, 29.038872, 20]
            },
            {
              name: '兰溪市',
              value: [119.460521, 29.270065, 20]
            },
            {
              name: '义乌市',
              value: [120.074911, 29.326863, 20]
            },
            {
              name: '东阳市',
              value: [120.335036, 29.232808, 20]
            },
            {
              name: '永康市',
              value: [120.036328, 28.925293, 20]
            },
            {
              name: '市本级',
              value: [119.592579, 29.202607, 20]
            },
            {
              name: '金东区',
              value: [119.801264, 29.165835, 20]
            },
            {
              name: '开发区',
              value: [119.582579, 29.077302, 20]
            },
            {
              name: '婺城区',
              value: [119.402579, 28.952607, 20]
            }
          ]
          this.options = {
            showLegendSymbol: true,
            tooltip: {
              trigger: 'item',
              textStyle: {
                fontSize: 14,
                lineHeight: 22
              },

              position: point => {
                // 固定在顶部
                return [point[0] + 50, point[1] - 20]
              },
              backgroundColor: 'rgba(0,0,0,.6)',
              // 如果需要自定义 tooltip样式，需要使用formatter
              formatter: params => {
                // params.data 就是series配置项中的data数据遍历
                let value,
                  total,
                  certified,
                  notCertified, htmlStr

                if (params.data) {
                  value = params.data.value
                  total = params.data.total
                  certified = params.data.certified
                  notCertified = params.data.notCertified
                  if (total) {
                    htmlStr = `<div style="color: #fff; font-size: 16px;"><div style='font-size:18px;'> ${params.name}</div>
                                      <p style='text-align:left;margin-top:5px;'>
                                          通过率：${value}%<br/>
                                          总人数：${total}<br/>
                                          已认证：${certified}<br/>
                                          未认证：${notCertified}<br/>
                                      </p></div>`
                  } else {
                    htmlStr = ''
                  }
                } else { // 为了防止没有定义数据的时候报错写的
                  htmlStr = ''
                }
                return htmlStr
              }
            },
            visualMap: {
              min: 0,
              max: 10,
              show: false,
              seriesIndex: 0,
              // 颜色
              inRange: {
                color: ['#1a68ff', '#0057ff'] // 地图背景
              }
            },
            // 底部背景
            geo: {
              show: true,
              aspectScale: 0.85, // 长宽比
              zoom: 1.2,
              top: '10%',
              left: '16%',
              map: 'map',
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: 'rgba(0,0,0,0)',
                  shadowColor: 'rgba(7,114,204, .8)',
                  shadowOffsetX: 5,
                  shadowOffsetY: 5
                },
                emphasis: {
                  areaColor: '#0057ff'
                }
              }
            },
            series: [
              {
                name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                type: 'map',
                aspectScale: 0.85, // 长宽比
                zoom: 1.2,
                mapType: 'map', // 自定义扩展图表类型
                top: '10%',
                left: '16%',
                itemStyle: {
                  normal: {
                    color: 'red',
                    areaColor: 'rgba(19,54,162, .5)',
                    borderColor: 'rgba(0,242,252,.3)',
                    borderWidth: 1,
                    shadowBlur: 7,
                    shadowColor: '#00f2fc'
                  },
                  emphasis: {
                    areaColor: '#f2b600', // 高亮背景颜色
                    borderColor: 'rgba(0,242,252,.6)',
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: '#00f2fc'
                  }
                },
                label: {
                  formatter: params => `${params.name}`,
                  show: true,
                  position: 'insideRight',
                  textStyle: {
                    fontSize: 14,
                    color: '#efefef'
                  },
                  emphasis: {
                    textStyle: {
                      color: '#fff'
                    }
                  }
                },
                data: newData
              },
              {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                symbolSize: 7,
                effectType: 'ripple',
                legendHoverLink: false,
                showEffectOn: 'render',
                rippleEffect: {
                  period: 4,
                  scale: 2.5,
                  brushType: 'stroke'
                },
                zlevel: 1,
                itemStyle: {
                  normal: {
                    color: '#99FBFE',
                    shadowBlur: 5,
                    shadowColor: '#fff'
                  }
                },
                data: seriesData
              }
            ]
          }
          // 重新选择区域
          this.handleMapRandomSelect()
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      // 开启定时器
      startInterval () {
        const _self = this
        // 应通过接口获取配置时间，暂时写死5s
        const time = 2000
        if (this.intervalId !== null) {
          clearInterval(this.intervalId)
        }
        this.intervalId = setInterval(() => {
          _self.reSelectMapRandomArea()
        }, time)
      },
      // 重新随机选中地图区域
      reSelectMapRandomArea () {
        const length = 9
        this.$nextTick(() => {
          try {
            const map = this.$refs.centerLeft1ChartRef.chart
            let index = Math.floor(Math.random() * length)
            while (index === this.preSelectMapIndex || index >= length) {
              index = Math.floor(Math.random() * length)
            }
            map.dispatchAction({
              type: 'mapUnSelect',
              seriesIndex: 0,
              dataIndex: this.preSelectMapIndex
            })
            map.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: index
            })
            map.dispatchAction({
              type: 'mapSelect',
              seriesIndex: 0,
              dataIndex: index
            })
            this.preSelectMapIndex = index
          } catch (error) {
            // console.log(error)
          }
        })
      },
      handleMapRandomSelect () {
        this.$nextTick(() => {
          try {
            const map = this.$refs.centerLeft1ChartRef.chart
            const _self = this
            setTimeout(() => {
              _self.reSelectMapRandomArea()
            }, 0)
            // 移入区域，清除定时器、取消之前选中并选中当前
            map.on('mouseover', function (params) {
              clearInterval(_self.intervalId)
              map.dispatchAction({
                type: 'mapUnSelect',
                seriesIndex: 0,
                dataIndex: _self.preSelectMapIndex
              })
              map.dispatchAction({
                type: 'mapSelect',
                seriesIndex: 0,
                dataIndex: params.dataIndex
              })
              _self.preSelectMapIndex = params.dataIndex
            })
            // 移出区域重新随机选中地图区域，并开启定时器
            map.on('globalout', function () {
              _self.reSelectMapRandomArea()
              _self.startInterval()
            })
            // 点击区域
            map.on('click', function (params) {
              _self.mapClick(params.data)
            })
            this.startInterval()
          } catch (error) {
            // console.log(error)
          }
        })
      },
      mapClick (data) {
        this.$emit('on-click', data)
      }
    }
  }
</script>

<style scoped lang="less">
  .bigCenter {
    width: 100%;
    height: 100%;
    padding:20px 14px 15px; box-sizing: border-box;
    .bg {
      border-radius: 12px;
      background: rgba(35, 62, 249, 0.2);
      height: 100%;
      padding: 10px; box-sizing: border-box;
    }
  }
</style>
